<template>
    <section>
        <DetailsHeader title="企业认证" class="mb-24"></DetailsHeader>

        <div class="page-card">
            <a-form :model="form" ref="formRef">
                <div class="card-content">
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item label="公司名称" name="enterpriseName"
                                :rules="[{ required: true, message: '请输入企业名称' }]">
                                <a-input v-model:value="form.enterpriseName" placeholder="请输入企业名称" />
                            </a-form-item>
                        </a-col>

                        <a-col :span="12">
                            <a-form-item label="统一社会信用代码" name="usciCode"
                                :rules="[{ required: true, message: '请输入统一社会信用码' }]">
                                <a-input v-model:value="form.usciCode" placeholder="请输入统一社会信用代码" />
                            </a-form-item>
                        </a-col>

                        <a-col :span="24">
                            <a-form-item label="营业执照" name="files" :rules="[{ required: true, message: '请上传营业执照' }]">
                                <a-upload v-model:file-list="fileList" name="file" list-type="picture-card"
                                    :headers="headers" class="avatar-uploader" :action="uploadImgUrl" maxCount="1"
                                    @change="handleChange">
                                    <div v-if="fileList.length < 1">
                                        <plus-outlined></plus-outlined>
                                        <div class="ant-upload-text">请上传营业执照</div>
                                    </div>
                                </a-upload>
                                <div class="upload-tips"><info-circle-filled
                                        style="margin-right: 5px;" />支持.JPG、JPEG、PNG格式，图片大小不超过5MB，营业执照中信息必须与工商信息一致，上传图片必须为实物图片，并且露出四个角，上传图片如果不够清晰，会审核不通过。
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
            </a-form>
        </div>

        <div class="page-bottom">
            <a-checkbox v-model:checked="checked"><span
                    style="color:#8A93A7;">同意真实性声明，本人确认以上信息都是完整的、真实及有效的，因未提供完整、真实及有效信息产生的一切法律后果及给GpuMall带来的损失由本人承担。</span></a-checkbox>
            <a-button type="primary" @click="nextStep" style="display:flex;align-item:center;"><svg-icon name="icon_release"
                    style="width:20px;height:20px;margin-right: 8px;color: #ffffff;" />提交申请</a-button>
        </div>

    </section>
</template>

<script setup name="Enterpriseauthentication">
import { reactive, ref } from 'vue'
import { uploadImgUrl } from '@/api/server.js'
import { enterpriseCertification } from 'api/modules/api.account'
import { ZyNotification, XsyMessage } from '@/libs/util.toast'
import { useRouter } from 'vue-router'
import {
    InfoCircleFilled,
    PlusOutlined
} from '@ant-design/icons-vue';
import dbUtils from "libs/util.strotage";
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import userInfoStore from '@/stores/userInfo.js'

const router = useRouter()

const form = ref({})
const checked = ref(false)
const formRef = ref()

const nextStep = () => {
    formRef.value.validateFields().then(() => {
        if (!checked.value) {
            XsyMessage.warning("请勾选协议")
            return
        }
        const params = {
            ...form.value,
        }
        enterpriseCertification(params).then(res => {
            if (res.code == 0) {
                userInfoStore().getUserInfo().then(() => {
                    ZyNotification.success('提交成功')
                    router.push('/account')
                })
            }
        })
    })
}

// 上传图片
const fileList = ref([])
const headers = {
    'gm-session-id': dbUtils.get('token')
}

const handleChange = ({
    file,
    fileList,
}) => {
    if (file.status === 'error') {
        ZyNotification.error(file.response.message || '上传失败')
    }
    if (file.status === 'done') {
        form.value.files = file.response.data.url || ''
    }
};

</script>

<style scoped lang="less">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 24px;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;

        .header-title {
            color: #223354;
            font-family: PingFang SC;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }
    }

    .card-content {
        .upload-tips {
            margin-top: 8px;
            color: #FAAD14;
            font-family: PingFang SC;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
        }
    }
}

.page-bottom {
    position: fixed;
    bottom: 0;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 10px 0px rgba(155, 174, 201, 0.40);
    width: calc(100% - 220px);
    min-height: 90px;
    padding: 24px;
    display: flex;
    justify-content: end;
    align-items: center;
}
</style>
